<template>
  <div class=" designLists-box">
    <!-- 设计列表 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />

    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    >

      <el-table-column
        label="操作"
        class-name="operate"
        :align="'center'"
        show-overflow-tooltip
      >
        <template #default="scope">
          <p
            v-if="scope.row.designType == '待设计' || scope.row.designType == '驳回'  || scope.row.designType == '待审核'"
            @click="upload(scope.row)"
          >上传设计</p>
        </template>
      </el-table-column>
    </forTableCom>
  </div>
</template>
<script setup>
import { designListMeasurement } from '@/api/costSum'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { ref, onMounted, defineEmits } from 'vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
const emit = defineEmits(['goMeasurement', 'updatePhotos'])
let updatePop = updatePopHook()
let deletePop = deletePopHook()
// 弹窗
let flag = ref(false)
// 详情禁用
let disabled = ref(false)
// 勾选激活行的背景色
const idActive = 'id'

// 表单
let inventoryForm = ref(
  {
    id: '',      // 测量单编号
    surveyDate: '',    // 测量日期
    customerId: '',      // 经营测量人员
    terminalName: '',      // 经营测量人员
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'id',
    label: '测量单编号'
  },
  {
    name: 'orderId',
    label: '单据编号'
  },
  {
    name: 'surveyDate',
    label: '测量日期',
    type: 'picker'
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'terminalName',
    label: '终端名称'
  },
  {
    name: 'designType',
    label: '设计状态',
    type: 'select',
    client: [
      {
        label: '待设计',
        value: '待设计'
      }, {
        label: '驳回',
        value: '驳回'
      }, {
        label: '已核算',
        value: '已核算'
      },
      {
        label: '待审核',
        value: '待审核'
      },
      {
        label: '审核通过',
        value: '审核通过'
      },
    ]
  },
])
// 查找suppliersName
const onSearch = (v) => {
  pageNum.value = 1
  getListMeasurementFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'id',
    label: '测量单编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'orderId',
    label: '单据编号',
    minwidth: 200
  },
  {
    prop: 'designType',
    label: '状态',
    minwidth: 70
  },
  {
    prop: 'surveyDate',
    label: '测量日期',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'businessSurveyorName',
    label: '经营测量人员',
    minwidth: 120
  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: 100
  },
  {
    prop: 'terminalName',
    label: '终端名称',
    minwidth: 100
  },
  {
    prop: 'designElements',
    label: '设计元素',
    minwidth: 100
  },
  {
    prop: 'designerName',
    label: '设计人员',
    minwidth: 100
  },
  {
    prop: 'designDrawings',
    label: '设计稿'
  },
  {
    prop: 'remarks',
    label: '驳回内容',
    minwidth: 100
  },
])
// 表格数据内容
let inventoryTableData = ref([

])
// 跳转上传图片
const updatePhotos = () => {
  emit('updatePhotos')
}

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = inventoryForm.value
  getListMeasurementFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}

// 新增数据页面
const addGoodsInfo = () => {
  flag.value = true
  disabled.value = false
}
// 修改数据页面
const updateGoodsInfo = () => {
  updatePop(multipleSelection, flag, '修改商品管理信息', disabled)
}
// 详情双击行
const tableDetail = (props) => {
  console.log(props);
  flag.value = true
  disabled.value = true
}


// 去测量
const goDevise = (v) => {
  emit('goDevise', v)
}

// 同意
const upload = (v) => {
  emit('updatePhotos', v)
}

// 接口
const listMeasurementFn = async (params) => {
  let { code, rows, total } = await designListMeasurement(params)
  if (code == 200) {
    rows.map(v => {
      v.designDrawings = JSON.parse(v.designDrawings)
    })
    inventoryTableData.value = rows
    totals.value = total
  }
}

const getListMeasurementFn = (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // designType:'待设计',
    // orderByColumn: idActive,
    // isAsc: 'desc'
  }
  let params = Object.assign(data1, data)
  listMeasurementFn(params)
}


onMounted(() => {
  getListMeasurementFn()
})
</script>
<style scoped lang='scss'>
.designLists-box {
  padding: 16px;
}
.operate{
  p{
      cursor: pointer;
      color: #1a48fe;
  }
}
</style>
